<template>
  <div>
    <div>
      <a href="https://juejin.cn/post/7054481067297734693">参考链接</a>
    </div>
    <input type="text" v-model="inputValue" />

    <div>doubleCount:{{ doubleCount }}</div>
    <div>doubleCount111:{{ doubleCount111 }}</div>

    <div>count:{{ count }}</div>
    <div>sonName:{{ son }}</div>

    <button @click="addNumber">点我测试调用store的action方法</button>
    <div>{{ todos }}</div>
    <div>{{ speak }}</div>
    <div>userData:{{ userData }}</div>
    <div>getters:{{ fullName }}</div>
  </div>
</template>
<script>
import { ref, computed, onMounted } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
import { useCounterStore } from "../store/modules/store.js";
import { storeToRefs } from "pinia";

export default {
  setup() {
    // 获取初始状态数据
    onMounted(() => {
      getList();
    });

    function getList() {
      counter.login();
    }

    // 调用函数 获得Store
    const counter = useCounterStore();
    // 三种方法让其值发生变化
    // counter.count++;
    console.log(counter.count); // 0

    // 1.通过使用pinia的内置API即$patch()进行更新
    // counter.$patch({ count: 12 }); // 12
    counter.$patch((state) => {
      state.todos.push({
        name: "zhangfan",
        age: 18,
      });
      state.speak = "heihei";
    });

    // console.log(counter.count); // 12
    // console.log(counter.speak); // heihei
    // console.log(toRaw(counter.todos)); // [{name: 'zhangfan', age: 18}]

    // 2.替换state的值，可以通过设置$state的值进行替换store中的state值
    // counter.$state = { count: 666, speak: "onechuan" };
    console.log(counter.count, counter.speak); // 666 , onechuan

    // 3.也可以通过pinia的实例去改变整个state的值
    // 但是，一般不建议直接修改state的值，Pinia中建议使用actions方法去修改和管理state的值，比如像下面这样：
    counter.updateName('毛子哥')


    // 使用computed获取响应式数据
    const inputValue = ref(123);
    const doubleCount = computed(() => inputValue.value * 2);
    const doubleCount111 = computed(() => counter.count);

    // 在导入store使用state状态时，直接进行解构会使得变量失去响应式。
    // 上面的数据中，count变量是失去了响应式的，它的值一直恒定不变
    // 对此，应该像composition API使用props一样，从pinia中导出storeToRefs进行获取响应式数据。
    // 对此，count现在转为响应式的数据了，这样将会把store中的state变量成了响应式，
    // const { count, todos, speak } = counter // 如果这样写，点击上面的测试按钮，count值不会加1的
    const { son } = counter
    const { count, todos, speak, userData, fullName } = storeToRefs(counter); // 只有这样写,点击上面的测试按钮，count值会正常加1

    function addNumber() {
      counter.increment();
      counter.count += 1
      counter.$patch((state) => {
        state.todos.push({
          name: "youyuxi",
          age: 91,
        });
      });
      counter.speak = "qwer";
      counter.$patch((state) => {
        state.userData.pwd = 456;
      });
    }

    return {
      counter,
      inputValue,
      doubleCount,
      doubleCount111,
      count,
      addNumber,
      speak,
      todos,
      userData,
      getList,
      fullName,
      son
    };
  },
};
</script>